<template>
  <div class="pie-echart">
    <base-echart :options="option"></base-echart>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import BaseEchart from '@/base-ui/echart'
import { IDataType } from '../types'

const props = defineProps<{
  mapData: IDataType[]
}>()

const option = computed(() => {
  return {
    tooltip: {
      show: true
    },
    visualMap: [
      {
        type: 'continuous',
        min: 0,
        max: 500,
        inRange: {
          color: ['#ccf', '#33f']
        },
        text: ['高', '低']
      }
    ],
    geo: {
      map: 'china',
      label: {
        show: true
      },
      itemStyle: {
        color: '#fff'
      }
    },
    series: [
      // 这里是地区颜色
      {
        name: '分类',
        type: 'map',
        geoIndex: 0,
        data: props.mapData
      },

      // 这里是散点图
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        itemStyle: {
          color: '#f00'
        },
        data: [
          {
            value: [106.9, 27.7, 100],
            symbolSize: 10,
            itemStyle: {
              color: '#f00'
            }
          },
          {
            value: [117.57, 34.86, 220],
            symbolSize: 20,
            itemStyle: {
              color: '#f0f'
            }
          }
        ]
      }
    ]
  }
})
</script>

<style lang="scss" scoped></style>
